<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">

.bar{ height : 20px ; width : 300px ; background-color: #EEEEEE; }
.bar::before{
	display : block;
	/* 计数器重置 见到变量就重置  */
	/* counter-reset : progress var(--percent); */
	counter-reset : progress var(--percent);
	/* 计数器（变量） 颜色？  特殊字符 \2002是空格*/
	content : counter(progress) '%\2002';
	width : calc( 1% * var(--percent));
	color : #fff;
	background-color : #2486ff;
	text-align : right ;
	white-space : nowrap ;
	overflow : hidden ;
}
</style>
</head>
<body>
<label> 图片1：</label>
<div class="bar" style="--percent:56;" ></div>
<label> 图片2： </label>
<div class="bar" style="--percent:40;" ></div>
<label> 图片3： </label>
<div class="bar" style="--percent:20;" ></div>
</body>
</html>
